<template>
    <div  >
        <div v-for="(item,i) in taocanlist" :key="i">
        <div>
            <img src="/images/8.jpg" alt="">
        </div>
        <div id="content">
        <div>{{item.name}}</div>
        <div>{{item.ticket}}</div><div>￥{{item.price}}</div>
        </div>
        </div>
    </div>
</template>
<style scoped>
img{
    width: 90vw;
    height: 41vw;
    margin: 5vw 10vw 0  5vw;
    border-radius: 8px;
}
#content{
    position: relative;
}
#content>div{
    position: absolute;
    color: white;
}
#content>div:first-child{
    bottom: 9vw;
    left :8vw;
}
#content>div:first-child+div{
    bottom: 3vw;
    left: 8vw;
    font-size: .8em;
}
#content>div:last-child{
    bottom: 3vw;
    right: 8vw;
    font-weight: bold;
}
</style>
<script>
export default {
    data() {
        return {
            taocanlist: [
                {name:"博鳌海洋馆门票+酒店家庭套餐",ticket:"标准票x2   儿童票x1  豪华双床房1晚",price:"1288.00"},
                {name:"博鳌海洋馆门票+酒店双人套餐",ticket:"标准票x2     豪华大床房1晚",price:"1088.00"},
            ]
        }
    },
}
</script>